<script setup lang='ts'>
import { InputProps, FormItemProps, FormRule } from 'tdesign-vue-next';
import { getCurrentInstance } from 'vue';
import { useAttrs } from 'vue';
import { PropType, onMounted, ref, watch } from 'vue';

const emits = defineEmits<{
    (e: 'update:modelValue', value: string): void;
    (e: 'change', value: any): void;
    (e: 'blur', value: any): void;
    (e: 'clear', value: any): void;
    (e: 'click', value: any): void;
    (e: 'compositionend', value: any): void;
    (e: 'compositionstart', value: any): void;
    (e: 'enter', value: any): void;
    (e: 'focus', value: any): void;
    (e: 'keydown', value: any): void;
    (e: 'keyup', value: any): void;
    (e: 'mouseenter', value: any): void;
    (e: 'mouseleave', value: any): void;
    (e: 'paste', value: any): void;
    (e: 'validate', value: any): void;
    (e: 'wheel', value: any): void;
}>();

const props = defineProps({
    name: {
        type: String,
        default: '',
        require: true
    },
    modelValue: {
        type: String,
        default: '',
        require: true
    },
    label: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: '请输入内容'
    },
    inputAttrs: {
        type: <PropType<InputProps>>Object,
        default: () => ({})
    },
    formAttrs: {
        type: <PropType<FormItemProps>>Object,
        default: () => ({})
    },
    readonly: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
    rules: {
        type: Array<FormRule>,
        default: () => []
    },
    type: {
        type: String,
        default: 'text'
    },
    help: {
        type: String,
        default: ''
    },
    span: {
        type: Number,
        default: 4
    }
});

onMounted(() => {
    if (!props.name) {
        throw new Error('ProFormInput => name is required')
    }
})

const innerValue = ref(props.modelValue || '');

watch(() => props.modelValue, (val, oldVal) => {
    innerValue.value = val;
})

function handleInput(e: any) {
    emits('update:modelValue', e.target.value);
}

function handleChange(e: any) {
    emits('change', e);
}

function handleBlur(e: any) {
    emits('blur', e);
}

function handleclick(e: any) {
    emits('click', e)
}
function handlecompositionend(e: any) {
    emits('compositionend', e)
}
function handlecompositionstart(e: any) {
    emits('compositionstart', e)
}
function handleenter(e: any) {
    emits('enter', e)
}
function handlefocus(e: any) {
    emits('focus', e)
}
function handlekeydown(e: any) {
    emits('keydown', e)
}
function handlekeyup(e: any) {
    emits('keyup', e)
}
function handlemouseenter(e: any) {
    emits('mouseenter', e)
}
function handlemouseleave(e: any) {
    emits('mouseleave', e)
}
function handlepaste(e: any) {
    emits('paste', e)
}
function handlevalidate(e: any) {
    emits('validate', e)
}
function handlewheel(e: any) {
    emits('wheel', e)
}

function reset() {
    innerValue.value = '';
}

</script>


<template>
    <t-form-item :help="props.help" :name="name" :label="props.label" :rules="rules" v-bind="props.formAttrs">
        <t-input @click="handleclick" @compositionend="handlecompositionend" @compositionstart="handlecompositionstart"
            @enter="handleenter" @focus="handlefocus" @keydown="handlekeydown" @keyup="handlekeyup"
            @mouseenter="handlemouseenter" @mouseleave="handlemouseleave" @paste="handlepaste" @validate="handlevalidate"
            @wheel="handlewheel" @blur="handleBlur" :type="type" @change="handleChange" v-bind="props.inputAttrs"
            :disabled="props.disabled" :readonly="props.readonly" @input="handleInput" v-model="innerValue"
            :placeholder="props.placeholder">
            <template #prefix-icon>
                <slot name="prefix-icon"></slot>
            </template>
        </t-input>
    </t-form-item>
</template>

<style scoped></style>